<template>
  <div class="bs-page-main">
    <div class="user-home">
      <div class="main-box">
        <div v-show="!hideNav" class="sub-nav">
          <ul>
            <li>
              <router-link to="/user/detail" active-class="cur"
                ><i class="detail"></i>Account Details</router-link
              >
            </li>
            <li>
              <router-link to="/user/address" active-class="cur"
                ><i class="addr"></i>Delivery Addresses</router-link
              >
            </li>
            <li>
              <router-link to="/user/order" active-class="cur"
                ><i class="order"></i>Order History</router-link
              >
            </li>
            <li>
              <router-link to="/user/profile" active-class="cur"
                ><i class="profile"></i>Profile</router-link
              >
            </li>
          </ul>
        </div>
        <div :class="editFlag ? 'user-main edit-cur' : 'user-main'">
          <div :class="editFlag ? 'u-tit cur' : 'u-tit'">
            <div>Order History</div>
            <router-link to="/user/profile" class="cls"></router-link>
          </div>
          <template v-if="editFlag">
            <div class="edit-ipt addr-n-b">
              <div class="order-history">
                <div class="order-per">
                  <div class="lb">
                    <em>Order Confirmed</em>
                    <div class="price">
                      <span>(-$49.00 )</span>
                      Subtotal: $49.00
                    </div>
                  </div>
                  <div class="order-dt">
                    <div class="pic">
                      <img src="/data/pic/ring2.jpg" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">Figure Slim Stacker Set</div>
                      <div class="des">Color: Gold</div>
                      <div class="des">size: 44</div>
                      <div class="des">Material: 14ct Solid Yellow Gold</div>
                      <div class="des">Occasion: Occasion1</div>
                    </div>
                    <span class="price">$49.00</span>
                    <span class="num">x1</span>
                  </div>
                  <div class="order-dt">
                    <div class="pic">
                      <img src="/data/pic/ring2.jpg" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">Figure Slim Stacker Set</div>
                      <div class="des">Color: Gold</div>
                      <div class="des">size: 44</div>
                      <div class="des">Material: 14ct Solid Yellow Gold</div>
                      <div class="des">Occasion: Occasion1</div>
                    </div>
                    <span class="price">$49.00</span>
                    <span class="num">x1</span>
                  </div>
                  <div class="od-btn">
                    <router-link to="/sellerDetail/1" class="view"
                      >View Detail</router-link
                    >
                    <a href="javascript:" class="buy">Buy It Again</a>
                  </div>
                </div>
                <div class="order-per">
                  <div class="lb">
                    <em>Order Confirmed</em>
                    <div class="price">
                      <span>(-$49.00 )</span>
                      Subtotal:$49.00
                    </div>
                  </div>
                  <div class="order-dt">
                    <div class="pic">
                      <img src="/data/pic/ring2.jpg" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">Figure Slim Stacker Set</div>
                      <div class="des">Color: Gold</div>
                      <div class="des">size: 44</div>
                      <div class="des">Material: 14ct Solid Yellow Gold</div>
                      <div class="des">Occasion: Occasion1</div>
                    </div>
                    <span class="price">$49.00</span>
                    <span class="num">x1</span>
                  </div>
                  <div class="order-dt">
                    <div class="pic">
                      <img src="/data/pic/ring2.jpg" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">Figure Slim Stacker Set</div>
                      <div class="des">Color: Gold</div>
                      <div class="des">size: 44</div>
                      <div class="des">Material: 14ct Solid Yellow Gold</div>
                      <div class="des">Occasion: Occasion1</div>
                    </div>
                    <span class="price">$49.00</span>
                    <span class="num">x1</span>
                  </div>
                  <div class="od-btn">
                    <router-link to="/sellerDetail/1" class="view"
                      >View Detail</router-link
                    >
                    <a href="javascript:" class="buy">Buy It Again</a>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const isMobile = document.documentElement.clientWidth < 800;
export default {
  data() {
    return {
      editFlag: true,
      isMobile,
      setDefault: true,
    };
  },
  computed: {
    hideNav() {
      return isMobile && this.editFlag;
    },
  },
  methods: {},
};
</script>
